<template>
  <div class="filter-popup-content">
    <!-- 户型 -->
    <div class="filter-popup-item">
      <div class="filter-popup-item-title">户型</div>
      <van-grid class="filter-popup-item-body">
        <van-grid-item
          class="filter-popup-item-body-text"
          v-for="item in conditions.roomType"
          :key="item.value"
          @click="roomTypeChoose(item.value)"
        >
          <template #text>
            <div
              class="text"
              :class="{ active: roomType.includes(item.value) }"
            >
              {{ item.text }}
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 朝向 -->
    <div class="filter-popup-item">
      <div class="filter-popup-item-title">朝向</div>
      <van-grid class="filter-popup-item-body">
        <van-grid-item
          class="filter-popup-item-body-text"
          v-for="item in conditions.oriented"
          :key="item.value"
          @click="orientedChoose(item.value)"
        >
          <template #text>
            <div
              class="text"
              :class="{ active: oriented.includes(item.value) }"
            >
              {{ item.text }}
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 楼层 -->
    <div class="filter-popup-item">
      <div class="filter-popup-item-title">楼层</div>
      <van-grid class="filter-popup-item-body">
        <van-grid-item
          class="filter-popup-item-body-text"
          v-for="item in conditions.floor"
          :key="item.value"
          @click="floorChoose(item.value)"
        >
          <template #text>
            <div class="text" :class="{ active: floor.includes(item.value) }">
              {{ item.text }}
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 房屋亮点 -->
    <div class="filter-popup-item">
      <div class="filter-popup-item-title">房屋亮点</div>
      <van-grid class="filter-popup-item-body">
        <van-grid-item
          class="filter-popup-item-body-text"
          v-for="item in conditions.characteristic"
          :key="item.value"
          @click="characteristicChoose(item.value)"
        >
          <template #text>
            <div
              class="text"
              :class="{ active: characteristic.includes(item.value) }"
            >
              {{ item.text }}
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterPopupContent',
  props: {
    conditions: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: []
    }
  },
  methods: {
    // 户型
    roomTypeChoose(value) {
      if (this.roomType.includes(value)) {
        this.roomType = this.roomType.filter((obj) => obj !== value)
      } else {
        this.roomType.push(value)
      }
      this.$emit('roomType', this.roomType)
    },
    // 朝向
    orientedChoose(value) {
      if (this.oriented.includes(value)) {
        this.oriented = this.oriented.filter((obj) => obj !== value)
      } else {
        this.oriented.push(value)
      }
      this.$emit('oriented', this.oriented)
    },
    // 楼层
    floorChoose(value) {
      if (this.floor.includes(value)) {
        this.floor = this.floor.filter((obj) => obj !== value)
      } else {
        this.floor.push(value)
      }
      this.$emit('floor', this.floor)
    },
    // 房屋亮点
    characteristicChoose(value) {
      if (this.characteristic.includes(value)) {
        this.characteristic = this.characteristic.filter((obj) => obj !== value)
      } else {
        this.characteristic.push(value)
      }
      this.$emit('characteristic', this.characteristic)
    }
  }
}
</script>

<style scoped lang="less">
.filter-popup-content {
  padding: 0 15px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-bottom: 50px;
  z-index: 3;
  background-color: #fff;
  .filter-popup-item-title {
    font-size: 15px;
    margin: 20px 0;
    line-height: 1.15;
  }
  .filter-popup-item-body {
    margin: 0 0 0 40px;
    padding: 0 0 14px;
    border-bottom: 1px solid #e5e5e5;
    &::after {
      border: unset;
    }
    .filter-popup-item-body-text {
      margin: 0 18px 15px 0;
      :deep(.van-grid-item__content) {
        padding: unset;
        .text {
          height: 32px;
          width: 70px;
          border-radius: 3px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #ddd;
          color: #888;
          font-size: 12px;
        }
        &::after {
          border: unset;
        }
      }
    }
  }
}
.active {
  border: 1px solid #21b97a !important;
  color: #21b97a !important;
  background-color: #defaef;
}
</style>
